<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4729176_sdqzv2ofd8.css">
</head>
<body>
    <div class="bg-fff">
        <!-- 视频标题 -->
        <p class="fcc w100p pt-10 pb-10">视频详情</p>

        <!-- 视频播放器 -->
        <iframe id="videoPlayer" src="" frameborder="0" width="100%" height="200"></iframe>

        <!-- 视频描述 -->
        <p id="title" class="ml-15 mb-10">正在加载视频描述...</p>

        <!-- 作者信息 -->
        <div class="flex aic ml-15">
            <img id="avatarurl" src="" alt="" style="height: 30px;width: 30px;">
            <span id="nickName" class="ml-5">加载中...</span>
        </div>
    </div>

    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        // 获取 URL 中的 id 参数
        function getUrlParam(name) {
            const search = window.location.search || window.location.hash.split('?')[1] || '';
            const params = new URLSearchParams(search);
            return params.get(name);
        }

        const videoId = getUrlParam('id');

        if (videoId) {
            // 请求后端接口获取视频详情
            axios.get(`http://43.136.85.99:3008/video/detail?id=${videoId}`)
                .then(res => {
                    if (res.data.code === 666 && res.data.msg === 'success') {
                        const data = res.data.data;

                        // 填充数据到页面
                        document.getElementById('videoPlayer').src = data.videoUrl;
                        document.getElementById('title').innerText = data.title;
                        document.getElementById('avatarurl').src = data.avatarurl;
                        document.getElementById('nickName').innerText = data.nickName;
                    } else {
                        alert('获取视频详情失败');
                    }
                })
                .catch(err => {
                    console.error('请求出错:', err);
                    alert('网络异常，请重试');
                });
        } else {
            alert('缺少视频ID');
        }
    </script>
</body>
</html>